<template>
	<div class="content">
		<div class="conttitle">
			<div style="height: 100%;">
				<div style="margin-top: 10px;" class="name"><span>剑魂</span><span>本人</span></div>
				<div style="margin-top: 20px;" class="phone">622*********0909</div>
			</div>
			<div style="margin-top: 20px;" class="mor"  @click='change'>
				<div style="" class="name"><img src="@/static/cut.png" alt="" style="width: 20px;height: 20px;"></div>
				<div style="" class="phone" >切换就诊人</div>
			</div>
		</div>
		<div class="balance">
			<div>卡内余额</div>
			<div>¥60.00</div>
		</div>
		<div class="h1">在线充值</div>
		<div class="choose">
			<div :class="list[0]" @click='listchange(0)'>{{choosemoney[0]}}</div>
			<div :class="list[1]" @click='listchange(1)'>{{choosemoney[1]}}</div>
			<div :class="list[2]" @click='listchange(2)'>{{choosemoney[2]}}</div>
		</div>
		<div class="choose" style="margin-top: 20px;">
			<div :class="list[3]" @click='listchange(3)'>{{choosemoney[3]}}</div>
			<div :class="list[4]" @click='listchange(4)'>{{choosemoney[4]}}</div>
			<div :class="list[5]" @click='listchange(5)'><input type="text" style="border: 0;width: 100%;height: 100%;" :placeholder="choosemoney[5]" @input="zb"></div>
		</div>
		<div style="display: flex;justify-content: flex-end;margin-top: 20px;padding-right: 10px;color: #006EFF;font-size: 14px;">
			<div>充值记录</div>
		</div>
		<div style="margin-top: 30px;margin-right: 10px;">
			<button style="border: 0;background-color: #006eff;color: #ddecff;font-weight: 400;" @tap="recharge">确认充值</button>
		</div>
		<view style="width: 100%;height: 250px;position: fixed;background-color: #ffffff;margin-left: -15px;bottom: -250px;z-index: 889;" :animation="animationData">
			<div style="position: absolute; top: 7%;right: 10%;"><img src="@/static/icon-close.png" alt="" style="width: 15px;height: 15px;" @click='close'></div>
			<div style="width: 100%;text-align: center;font-size: 17px;margin-top: 10px;">选择就诊人</div>
			<div style="display: flex;padding: 20px;align-items: center;border-bottom: 1px solid #f2f2f2;">
				<div style="height: 100%;width: 100%;" @click='close'>
					<div style="margin-top: 10px;" class="name"><span>剑魂</span><span>本人</span></div>
					<div style="margin-top: 20px;" class="phone">622*********0909</div>
				</div>
				<div style="margin-top: 20px;" class="mor">
					<div style="" class="name"><img src="@/static/addmore.png" alt="" style="width: 10px;height: 10px;"></div>
				</div>
			</div>
			<div style="display: flex;padding: 20px;align-items: center;border-bottom: 1px solid #f2f2f2;">
				<div style="height: 100%;width: 100%;"  @click='close'>
					<div style="margin-top: 10px;" class="name"><span>剑魂</span><span>本人</span></div>
					<div style="margin-top: 20px;" class="phone">622*********0909</div>
				</div>
				<div style="margin-top: 20px;" class="mor">
					<div style="" class="name"><img src="@/static/addmore.png" alt="" style="width: 10px;height: 10px;"></div>
				</div>
			</div>
		</view>
			<div style="width: 100%;padding: 100%;position: fixed;background-color: #666666;z-index: 888;top: 0;margin-left: -15px;opacity: .5;" v-show="show" @click='disnone'></div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				animationData: {},
				show:false,
				list:['zoif','zoi','zoi','zoi','zoi','zoi'],
				nowmoney:50,
				choosemoney:[50,100,200,500,1000,'自定义']
			}
		},methods:{
			close(){
				console.log(1)
				    var animation = uni.createAnimation({
				      duration: 1000,
				        timingFunction: 'ease',
				    })
				
				    this.animation = animation
				
				    animation.translateY(0).step()
				
				    this.animationData = animation.export()
					this.show=false
			},change(){
					console.log(1)
					    var animation = uni.createAnimation({
					      duration: 1000,
					        timingFunction: 'ease',
					    })
					
					    this.animation = animation
					
					    animation.translateY(-251).step()
					
					    this.animationData = animation.export()
						this.show=true
				},disnone(){
					var animation = uni.createAnimation({
					  duration: 1000,
					    timingFunction: 'ease',
					})
										
					this.animation = animation
										
					animation.translateY(-1).step()
										
					this.animationData = animation.export()
					this.show=false
				},
			listchange(val){
				this.list=['zoi','zoi','zoi','zoi','zoi','zoi']
				this.list[val]='zoif'
				this.nowmoney=this.choosemoney[val]
				console.log(this.nowmoney)
			},zb(e){
				console.log(e.detail.value)
				this.nowmoney=e.detail.value
			},recharge(){
				let _self=this;
				uni.showLoading({
					title: '微信支付'
				});
				
				setTimeout(function () {
					uni.hideLoading();
					uni.navigateTo({
						url:`../../../wxpay/pages/wxpay?mm=${_self.nowmoney}`
					})
				}, 2000);


			}
		}
	}
</script>
	
<style>
	.button{
	    font-family: 'PingFangHK-Medium', 'PingFang HK Medium', 'PingFang HK', sans-serif;
	    font-weight: 500;
	    font-style: normal;
	    font-size: 12px;
	    color: #FFFFFF;
	    line-height: 32px;
				background-color: rgba(0, 110, 255, 1);
				width: 80px;
				    height: 32px;
					text-align: center;
					border-radius: 5px;
					
		}
	.money{
			font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
			    font-weight: 500;
			    font-style: normal;
			    font-size: 17px;
			    color: #F46363;
		}
		.gomove{
			margin-top: 10px;
			border-radius: 5px;
			width: 72px;
			    height: 32px;
				font-family: 'PingFangHK-Medium', 'PingFang HK Medium', 'PingFang HK', sans-serif;
				    font-weight: 500;
				    font-style: normal;
				    color: #FFFFFF;
				    line-height: 20px;
					background-color: #006EFF;
					font-size: 14px;
					line-height: 32px;
					text-align: center;
		}
		.godname{
			font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
			    font-weight: 400;
			    font-style: normal;
			    font-size: 15px;
			    color: #555555;
				margin: 5px 0;
		}
		.godhospname{
			font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
			    font-weight: 200;
			    font-style: normal;
			    font-size: 12px;
			    color: #AAAAAA;
							margin: 5px 0;
				
		}
		.cart{
			margin-bottom: 20px;
			padding: 0px 15px;
			border: 1px solid #f2f2f2;
			display: flex;
			justify-content: space-between;
		}
		.choose{
			display: flex;
		}
		.zoi {
			flex: 1;
			background-color: #f2f2f2;
			color: #5c5c5c;
			line-height: 48px;
			margin: 0 10px;
			text-align: center;
			border-radius: 10px;
		}
		.zoif {
			flex: 1;
			background-color: #e3efff;
			color: #0e75ff;
			border: 1px solid #006eff;
			border-radius: 10px;
			line-height: 48px;
			margin: 0 10px;
			text-align: center;
		}
		.h1 {
			margin: 20px 0px;
			font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
			    font-weight: 500;
			    font-style: normal;
			    font-size: 17px;	
		}
		.balance div:nth-child(1){
			font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
			    font-weight: 400;
			    font-style: normal;
			    font-size: 15px;
			    color: #555555;
		}
		.balance div:nth-child(2){
			font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
			    font-weight: 400;
			    font-style: normal;
			    font-size: 18px;
			    color: #555555;
		}
		.balance{
			padding: 0 15px;
			margin-top: 10px;
			height: 70px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: 1px solid #f2f2f2;
			background-color: #ffffff;
		}
		.mor {
			font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
			    font-weight: 200;
			    font-style: normal;
				text-align: center;
			    font-size: 12px;
		}
		.phone {
			margin-top: 10px;
			    font-weight: 200;
			    font-style: normal;
			    font-size: 12px;
			    color: #AAAAAA;
		}
		.name span:nth-child(1){
			font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
			    font-weight: 400;
			    font-style: normal;
			    font-size: 15px;
			    color: #555555;
		}
		.name span:nth-child(2) {
			margin-left: 5px;
			font-size: 12px;
			display: inline-block;
			width: 44px;
			height: 18px;
			padding: 2px;
			background-color: #e2edfe;
			text-align: center;
			line-height: 18px;
			border-radius: 10px;
			letter-spacing: 1px;
			color: #006EFF;
		}
		.conttitle{
			background-color: #f5f9ff;
			height: 80px;
			display: flex;
			font-weight: 200;
			border: 1px solid #f2f2f2;
			padding: 20px 15px;
			justify-content: space-between;
			margin-top: 15px;
		}
		.content {
			padding: 30px 15px;
		}
		.choosetime{
			padding: 5px 10px;
			font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
			    font-weight: 200;
			    font-style: normal;
			    font-size: 12px;
			    letter-spacing: 1px;
				color: #4998ff;
				background-color: #e4f0ff;
				border-radius: 15px;
				margin-left: 15px;
		}
		.lasttime{
			padding: 5px 10px;
	    font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
	    font-weight: 200;
	    font-style: normal;
	    font-size: 12px;
	    letter-spacing: 1px;
	    color: #f5f9ff;
		background-color: #006eff;
		border-radius: 15px;
		
		}
		.timezou{
			display: flex;
			margin-top: 15px;
		}
		.dingmember {
	
			font-family: "Arial Negreta", "Arial Normal", Arial, sans-serif;
			    font-weight: 700;
			    font-style: normal;
			    font-size: 41px;
			    color: rgb(255, 255, 255);
			    text-align: center;
			    line-height: 40px;
		}
		.ding {
					margin-bottom: 10px;
			font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
			    font-weight: 200;
				letter-spacing: 1.7px;
				font-style: normal;
				    font-size: 13px;
					color: #ffffff;
		}
		.order{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 20px auto;
			background-color: #f9972b;
			width: 160px;
			height: 160px;
			border-radius: 160px;
			text-align: center;
		}
		.name{
			color: #AAAAAA;
			font-family: PingFangSC-Light, "PingFang SC Light", "PingFang SC", sans-serif;
			    font-weight: 200;
			    font-style: normal;
			    font-size: 14px;
				margin-right: 15px;
		}
		.name1{
			font-family: PingFangSC-Light, "PingFang SC Light", "PingFang SC", sans-serif;
			    font-weight: 200;
			    font-style: normal;
			    font-size: 14px;
		}
		.choose{
			display: flex;
		}
		.zoi {
			flex: 1;
			background-color: #f2f2f2;
			color: #5c5c5c;
			line-height: 48px;
			margin: 0 10px;
			text-align: center;
			border-radius: 10px;
		}
		.zoif {
			flex: 1;
			background-color: #e3efff;
			color: #0e75ff;
			border: 1px solid #006eff;
			border-radius: 10px;
			line-height: 48px;
			margin: 0 10px;
			text-align: center;
		}
		.h1 {
			margin: 20px 0px;
			font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
			    font-weight: 500;
			    font-style: normal;
			    font-size: 17px;	
		}
		.balance div:nth-child(1){
			font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
			    font-weight: 400;
			    font-style: normal;
			    font-size: 15px;
			    color: #555555;
		}
		.balance div:nth-child(2){
			font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
			    font-weight: 400;
			    font-style: normal;
			    font-size: 18px;
			    color: #555555;
		}
		.balance{
			padding: 0 15px;
			margin-top: 10px;
			height: 70px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: 1px solid #f2f2f2;
			background-color: #ffffff;
		}
		.mor {
			font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
			    font-weight: 200;
			    font-style: normal;
				text-align: center;
			    font-size: 12px;
		}
		.phone {
			margin-top: 10px;
			    font-weight: 200;
			    font-style: normal;
			    font-size: 12px;
			    color: #AAAAAA;
		}
		.name span:nth-child(1){
			font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
			    font-weight: 400;
			    font-style: normal;
			    font-size: 15px;
			    color: #555555;
		}
		.name span:nth-child(2) {
			margin-left: 5px;
			font-size: 12px;
			display: inline-block;
			width: 44px;
			height: 18px;
			padding: 2px;
			background-color: #e2edfe;
			text-align: center;
			line-height: 18px;
			border-radius: 10px;
			letter-spacing: 1px;
			color: #006EFF;
		}
		.conttitle{
			background-color: #f5f9ff;
			height: 80px;
			display: flex;
			font-weight: 200;
			border: 1px solid #f2f2f2;
			padding: 20px 10px;
			justify-content: space-between;
			margin-top: 15px;
		}
		.content {
			padding: 30px 15px;
		}
	.choose{
		display: flex;
	}
	.zoi {
		flex: 1;
		background-color: #f2f2f2;
		color: #5c5c5c;
		line-height: 48px;
		margin: 0 10px;
		text-align: center;
		border-radius: 10px;
	}
	.zoif {
		flex: 1;
		background-color: #e3efff;
		color: #0e75ff;
		border: 1px solid #006eff;
		border-radius: 10px;
		line-height: 48px;
		margin: 0 10px;
		text-align: center;
	}
	.h1 {
		margin: 20px 0px;
		font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
		    font-weight: 500;
		    font-style: normal;
		    font-size: 17px;	
	}
	.balance div:nth-child(1){
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    font-size: 15px;
		    color: #555555;
	}
	.balance div:nth-child(2){
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    font-size: 18px;
		    color: #555555;
	}
	.balance{
		padding: 0 15px;
		margin-top: 10px;
		height: 70px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1px solid #f2f2f2;
		background-color: #ffffff;
	}
	.mor {
		font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
		    font-weight: 200;
		    font-style: normal;
			text-align: center;
		    font-size: 12px;
	}
	.phone {
		margin-top: 10px;
		    font-weight: 200;
		    font-style: normal;
		    font-size: 12px;
		    color: #AAAAAA;
	}
	.name span:nth-child(1){
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    font-size: 15px;
		    color: #555555;
	}
	.name span:nth-child(2) {
		margin-left: 5px;
		font-size: 12px;
		display: inline-block;
		width: 44px;
		height: 18px;
		padding: 2px;
		background-color: #e2edfe;
		text-align: center;
		line-height: 18px;
		border-radius: 10px;
		letter-spacing: 1px;
		color: #006EFF;
	}
	.conttitle{
		background-color: #f5f9ff;
		height: 80px;
		display: flex;
		font-weight: 200;
		border: 1px solid #f2f2f2;
		padding: 20px 10px;
		justify-content: space-between;
		margin-top: 15px;
	}
	.content {
		padding: 30px 15px;
	}
</style>